কম্পোনেন্ট লাইফসাইকেল হুকস

Angular কম্পোনেন্টের একটি জীবনচক্র (life cycle) রয়েছে, যা বিভিন্ন ধাপে ভাগ করা হয়। প্রতিটি ধাপের মধ্যে Angular কম্পোনেন্টের অবস্থা পরিবর্তিত হয় এবং এই পরিবর্তনের সময় কম্পোনেন্টে নির্দিষ্ট কোড এক্সিকিউট করতে লাইফসাইকেল হুকস ব্যবহার করা যায়। লাইফসাইকেল হুকস হল Angular এর এমন মেথড যেগুলি কম্পোনেন্টের বিভিন্ন লাইফসাইকেল স্টেজে অ্যাক্সেস করা যায়।

এই হুকসগুলোর মাধ্যমে আপনি কম্পোনেন্ট তৈরি হওয়া, ইনি আপডেট হওয়া এবং ধ্বংস হওয়ার সময় বিভিন্ন কার্যকলাপ বা লজিক প্রয়োগ করতে পারেন।

কম্পোনেন্ট লাইফসাইকেল স্টেজ

Angular কম্পোনেন্টের জীবনচক্র প্রধানত ৭টি ধাপে ভাগ করা হয়:

1. নির্মাণ (Creation)
2. ইনিশিয়ালাইজেশন (Initialization)
3. ডেটা চেঞ্জ (Change Detection)
4. প্রদর্শন (Rendering)
5. আপডেট (Update)
6. ধ্বংস (Destruction)

প্রত্যেকটি ধাপে বিভিন্ন লাইফসাইকেল হুকস কার্যকর হয়।

Angular কম্পোনেন্ট লাইফসাইকেল হুকস

Angular কম্পোনেন্টে বেশ কিছু লাইফসাইকেল হুকস রয়েছে, যেগুলি আপনি প্রয়োগ করতে পারেন।

1. ngOnChanges

• এটি তখনই কল হয় যখন কম্পোনেন্টের ইনপুট প্রপার্টি পরিবর্তিত হয়। এর মাধ্যমে আপনি ইনপুট পরিবর্তনের উপর ভিত্তি করে কোনো কাস্টম লজিক প্রয়োগ করতে পারেন।

  import { Component, OnChanges, SimpleChanges } from '@angular/core';
  
  @Component({
    selector: 'app-example',
    template: `<p>{{ message }}</p>`
  })
  export class ExampleComponent implements OnChanges {
    @Input() message: string;
  
    ngOnChanges(changes: SimpleChanges) {
      console.log(changes);
    }
  }
  

  ngOnChanges মেথডে SimpleChanges অবজেক্ট আসে, যেখানে ইনপুট প্রপার্টির পূর্ববর্তী ও বর্তমান মান দেখতে পারেন।

2. ngOnInit

• এটি তখন কল হয় যখন কম্পোনেন্টের ইনপুট প্রপার্টি সম্পূর্ণরূপে ইনিশিয়ালাইজ হয়। সাধারণত এখানে কোনো ইনিশিয়াল ভ্যালু বা ডেটা লোড করার কাজ করা হয়।

  import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-example',
    template: `<p>{{ message }}</p>`
  })
  export class ExampleComponent implements OnInit {
    message: string;
  
    ngOnInit() {
      this.message = 'Hello, Angular!';
    }
  }
  

  ngOnInit মেথড কম্পোনেন্টের প্রথম রেন্ডার হওয়ার পর কল হয়।

3. ngDoCheck

• এটি Angular এর পরিবর্তন সনাক্তকরণ (change detection) প্রক্রিয়ার অংশ হিসেবে কাজ করে। যখন Angular কোনো পরিবর্তন সনাক্ত করে না, তাও যদি আপনি কিছু পরিবর্তন বা চেক করতে চান, তখন এটি ব্যবহার করা হয়।

  import { Component, DoCheck } from '@angular/core';
  
  @Component({
    selector: 'app-example',
    template: `<p>{{ message }}</p>`
  })
  export class ExampleComponent implements DoCheck {
    message: string = 'Initial message';
  
    ngDoCheck() {
      console.log('DoCheck called');
    }
  }
  

  ngDoCheck মেথড কাস্টম চেক করার জন্য ব্যবহৃত হয়, যখন আপনি Angular-এর ডিফল্ট পরিবর্তন সনাক্তকরণের বাইরে কিছু করতে চান।

4. ngAfterContentInit

• এটি তখন কল হয় যখন কম্পোনেন্টের কনটেন্ট (টেম্পলেটে ডিফাইন করা প্রোপার্টি) প্রথমবার রেন্ডার করা হয়। আপনি এখানে কনটেন্টের প্রাথমিক লোডিং বা পার্সিং করতে পারেন।

  import { Component, AfterContentInit } from '@angular/core';
  
  @Component({
    selector: 'app-example',
    template: `<ng-content></ng-content>`
  })
  export class ExampleComponent implements AfterContentInit {
    
    ngAfterContentInit() {
      console.log('ngAfterContentInit called');
    }
  }
  

  ngAfterContentInit মেথড তখনই কল হয়, যখন Angular আপনার কম্পোনেন্টের ng-content প্রপার্টি রেন্ডার করে।

5. ngAfterContentChecked

• এটি তখন কল হয় যখন কম্পোনেন্টের কনটেন্ট চেক করা হয়। এটি ngAfterContentInit এর পরপরই কল হয়, এবং এরপরও যতবার চেকিং হয় ততবার কল হতে পারে।

  import { Component, AfterContentChecked } from '@angular/core';
  
  @Component({
    selector: 'app-example',
    template: `<ng-content></ng-content>`
  })
  export class ExampleComponent implements AfterContentChecked {
  
    ngAfterContentChecked() {
      console.log('ngAfterContentChecked called');
    }
  }
  

6. ngAfterViewInit

• এটি তখন কল হয় যখন কম্পোনেন্টের ভিউ (টেম্পলেট) এবং সাব কম্পোনেন্টগুলি প্রথমবার রেন্ডার হয়। আপনি এখানে UI সম্পর্কিত কোড বা ডোম ম্যানিপুলেশন করতে পারেন।

  import { Component, AfterViewInit } from '@angular/core';
  
  @Component({
    selector: 'app-example',
    template: `<div>{{ message }}</div>`
  })
  export class ExampleComponent implements AfterViewInit {
    
    ngAfterViewInit() {
      console.log('ngAfterViewInit called');
    }
  }
  

7. ngAfterViewChecked

• এটি তখন কল হয়, যখন কম্পোনেন্টের ভিউ চেক করা হয়। এটি ngAfterViewInit এর পরপরই চলে এবং এরপরও যতবার চেকিং হয় ততবার কল হতে পারে।

  import { Component, AfterViewChecked } from '@angular/core';
  
  @Component({
    selector: 'app-example',
    template: `<div>{{ message }}</div>`
  })
  export class ExampleComponent implements AfterViewChecked {
  
    ngAfterViewChecked() {
      console.log('ngAfterViewChecked called');
    }
  }
  

8. ngOnDestroy

• এটি তখন কল হয় যখন কম্পোনেন্ট বা ডিরেক্টিভ ধ্বংস (destroy) হয়। এটি বিশেষত পরিষ্কারকরণ (cleanup) কাজের জন্য ব্যবহৃত হয়, যেমন সাবস্ক্রিপশন বন্ধ করা, টাইমার বন্ধ করা ইত্যাদি।

  import { Component, OnDestroy } from '@angular/core';
  
  @Component({
    selector: 'app-example',
    template: `<div>{{ message }}</div>`
  })
  export class ExampleComponent implements OnDestroy {
  
    ngOnDestroy() {
      console.log('ngOnDestroy called');
    }
  }
  

  ngOnDestroy মেথডের মাধ্যমে আপনি কম্পোনেন্টের মেমরি লিক এড়াতে পারেন।

সারাংশ

Angular কম্পোনেন্টের লাইফসাইকেল হুকস বিভিন্ন ধাপে কার্যকর হয় এবং কম্পোনেন্টের জীবনচক্রের মধ্যে কোড কার্যকর করতে সাহায্য করে। আপনি এই হুকসগুলো ব্যবহার করে:

• ইনপুট ডেটার পরিবর্তন ট্র্যাক করতে পারেন।
• কম্পোনেন্ট লোড হওয়া এবং ধ্বংস হওয়ার সময় কিছু কার্যকলাপ করতে পারেন।
• ডোম বা কনটেন্ট রেন্ডার হওয়ার পরে UI-এ পরিবর্তন আনতে পারেন।

এই হুকসগুলো Angular অ্যাপ্লিকেশনকে আরও শক্তিশালী, কর্মক্ষম এবং মডুলার করে তোলে।